<template>
  <div>
    <h1>会员信息列表</h1>
    会员姓名:<input type="text" v-model="list.name" />
    会员等级:
    <select v-model="list.mid">
        <option value="0">请选择</option>
        <option v-for="x in xldata" :value="x.id">{{ x.names }}</option>
    </select>
    性别:
    <select v-model="list.sex">
        <option :value="null">请选择</option>
        <option :value="true">男</option>
        <option :value="false">女</option>
    </select>
    <input type="button" value="查询" @click="query">
    <a href="/login">登录</a>-
    <a href="/add">新增会员</a>
    <table class="table">
      <thead>
        <tr>
          <th>
            <input type="checkbox" v-model="qx" @change="qxsj" >
          </th>
          <th>会员编号</th>
          <th>会员名称</th>
          <th>密码</th>
          <th>会员头像</th>
          <th>性别</th>
          <th>爱好数量</th>
          <th>爱好</th>
          <th>会员等级</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="d in data">
            <td>
            <input type="checkbox" v-model="sj" :value="d.id" >
          </td>
          <td>{{ d.id }}</td>
          <td>{{ d.name }}</td>
          <td>*****</td>
          <td>
            <img :src="'https://localhost:7114'+d.img" style="width: 100px;height: 100px;" /> 
          </td>
          <td>{{ d.sex?"男":"女" }}</td>
          <td>{{ d.houbbyCount }}</td>
          <td>{{ d.houbbyString }}</td>
          <td>{{ d.names }}</td>
          <td>{{ moment(d.createData).format('YYYY-MM-DD') }}</td>
          <td>
            <input type="button" value="批量逻辑删除" @click="pllogdel" />
            <input type="button" value="修改" @click="upd(d.id)" />
          </td>
        </tr>
      </tbody>
    </table>
    <input type="button" value="首页" @click="fy(1)">
    <input type="button" value="上一页" @click="fy(2)">
    <input type="button" v-for="m in page.totapage" :value="m" @click="ym(m)">
    <input type="button" value="下一页" @click="fy(3)">
    <input type="button" value="尾页" @click="fy(4)">
    共{{ page.totapage }}页,当前{{ list.pageindex }}页,共{{ page.totanum }}条,每页{{ list.pagesize }}条
    跳转至:<input type="number" v-model="index" />
    <input type="button" value="跳转" @click="tz(index)" />
    <select v-model="list.pagesize" @change="yrl">
        <option value="2">请选择</option>
        <option value="3">每页三条</option>
        <option value="5">每页五条</option>
        <option value="7">每页七条</option>
    </select>
  </div>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';
import moment from 'moment';
import axios from 'axios';
import { useMemberStore } from '@/stores/member';
import { useRouter } from 'vue-router';

const router=useRouter()
const users = useMemberStore()

onMounted(()=>{
    getuser()
    show()
    xlk()
})

const xldata=ref([{
    "id": 1,
    "names": "普通会员"
  }])

const xlk=()=>{
    axios.get("https://localhost:7114/api/Lev",{params:xldata.value}).then(res=>{
        xldata.value=res.data
    })
}

const getuser=()=>{
    if(users.member.state==false){
        alert('用户未登录,请登录后再试')
        router.push({path:"/login"})
    }
}

const upd=(val:any)=>{
    router.push({path:"/upd",query:{id:val}})
}

const qx=ref(false)
const sj=ref([0])

const qxsj=()=>{
    if(qx.value){
        data.value.forEach(e=>{
            sj.value.push(e.id)
        })
    }
    else{
        sj.value=[]
    }
}

const pllogdel=()=>{
    if(confirm('确定批量逻辑删除吗?'))
    axios.delete("https://localhost:7114/api/Member/PlLogDel",{params:{idstring:sj.value.toString()}}).then(res=>{
        if(res.data>0){
            alert('批量逻辑删除成功')
            show()
        }
        else{
            alert('批量逻辑删除失败')
        }
    })
}



const data=ref([{
      "id": 3,
      "name": "zhangsan",
      "password": "202cb962ac59075b964b07152d234b70",
      "sex": true,
      "houbbyCount": 2,
      "houbbyString": "篮球,足球",
      "img": "/Img/9b536eed-9bc2-4a7f-8136-e2e076f3bd071.png",
      "memberLevelId": 2,
      "createData": "2025-04-10T18:17:17.57662",
      "names": "青铜会员"
    }])

const list=ref({
    name:'',
    mid:0,
    sex:null,
    pageindex:1,
    pagesize:2
})

const page=ref({
    totanum:0,
    totapage:0
})
let index=0;
const show=()=>{
    axios.get("https://localhost:7114/api/Member/ShowMember",{params:list.value}).then(res=>{
        data.value=res.data.list
        page.value.totanum=res.data.totanum
        page.value.totapage=Math.ceil( page.value.totanum/list.value.pagesize)
        index=list.value.pageindex
    })
}

const fy=(val:any)=>{
    if(val==1){
        list.value.pageindex=1
        show()
    }
    if(val==2){
        if(list.value.pageindex>1){
            list.value.pageindex-=1
            show()
        }
    }
    if(val==3){
        if(list.value.pageindex<page.value.totapage){
            list.value.pageindex+=1
            show()
        }
    }
    if(val==4){
        list.value.pageindex=page.value.totapage
        show()
    }
}

const ym=(val:any)=>{
    list.value.pageindex=val
    show()
} 

const tz=(val:any)=>{
     if(val>0&&val<=page.value.totapage){
        list.value.pageindex=val
        show()
     }
}

const yrl=()=>{
    list.value.pageindex=1
    show()
}

const query=()=>{
    list.value.pageindex=1
    show()
}

</script>

<style scoped></style>
